<template>
  <div class="components-attr-edit components-attr-animate-edit">
    <div v-if="activeElementUUID">
      <div class="ma-5 text-center">
        <v-btn
          small
          color="primary"
          class="mr-3"
          @click="addAnimate"
        >
          <v-icon left>
            mdi-plus
          </v-icon>
          添加动画
        </v-btn>
        <v-btn
          small
          color="primary"
          class="ml-3"
          @click="runAnimate(undefined)"
        >
          <v-icon left>
            mdi-monitor-eye
          </v-icon>
          预览动画
        </v-btn>
      </div>
      <div v-show="activeElement.animations.length" class="el-animate-list-wrapper">
        <v-expansion-panels accordion>
          <v-expansion-panel v-for="(item, index) in activeElement.animations" :key="index">
            <v-expansion-panel-header>
              <span class="el-animate-title-name">动画 {{ index }}</span>
              <div class="el-animate-title-type-wrapper">
                <span class="el-animate-title-type" @click.stop.prevent="handleShowChooseAnimatePanel(index)">
                  {{ item.type }}
                  <v-icon>mdi-menu-right</v-icon>
                </span>
              </div>
              <span class="el-animate-title-btn" @click.stop.prevent="runAnimate(index)"><v-icon>mdi-menu-right</v-icon></span>
              <span class="el-animate-title-btn" @click.stop.prevent="handleDeleteAnimate"><v-icon>mdi-delete</v-icon></span>
            </v-expansion-panel-header>
            <v-expansion-panel-content>
              <div class="el-animate-item">
                <div class="attr-item-edit-wrapper">
                  <p class="attr-item-title">动画时长：</p>
                  <div style="width: 100%">
                    <v-slider
                      v-model="item.duration"
                      :min="0"
                      :max="10"
                      step="0.1"
                      thumb-label
                    />
                  </div>
                </div>
                <div class="attr-item-edit-wrapper">
                  <p class="attr-item-title">动画延迟：</p>
                  <div style="width: 100%">
                    <v-slider
                      v-model="item.delay"
                      :min="0"
                      :max="10"
                      step="0.1"
                      thumb-label
                    />
                  </div>
                </div>
                <div class="attr-item-edit-wrapper">
                  <p class="attr-item-title">循环次数：</p>
                  <div style="width: 100%" class="mr-3">
                    <v-slider
                      v-model="item.interationCount"
                      :min="0"
                      :max="10"
                      inverse-label
                      thumb-label
                      label="次"
                    />
                  </div>
                  <div style="width: 100%" class="ml-3">
                    <v-switch
                      v-model="item.infinite"
                      true-value="infinite"
                      label="循环播放"
                      class="mt-0 pt-0"
                    />
                  </div>
                </div>
              </div>
            </v-expansion-panel-content>
          </v-expansion-panel>
        </v-expansion-panels>
      </div>
    </div>
    <div v-else>
      <p class="gray text-center pt-5">请在画板上选择需要编辑得元素</p>
    </div>

    <v-expand-transition>
      <div v-show="showAnimatePanel" class="components-attr-edit animate-choose-list-wrapper">
        <v-tabs v-model="activeName">
          <v-tab v-for="item in animateCssDatas" :key="item.label" v-text="item.label" />
          <v-tab-item v-for="item in animateCssDatas" :key="item.label">
            <div
              v-for="(animate, index) in item.children"
              :key="index"
              class="animate-choose-item-inner pa-5"
              @mouseover="hoverPreviewAnimate = animate.value"
              @mouseleave="hoverPreviewAnimate = ''"
              @click="handleChooseAnimate(animate)"
            >
              <span
                class="animate-choose-image"
                :style="{backgroundPosition: `${item.bg_X}px ${item.bg_Y}px`}"
                :class="[hoverPreviewAnimate === animate.value && 'animate__' + animate.value + ' animate__animated']"
              />
              <p>{{ animate.label }}</p>
            </div>
          </v-tab-item>
        </v-tabs>
      </div>
    </v-expand-transition>
  </div>
</template>

<script>
import animateCssData from './attr-props-components/animateCssData'
import { mapGetters } from 'vuex'
import Bus from '@/eventBus'

export default {
  data() {
    return {
      animateCssDatas: animateCssData,
      activeName: '进入',
      showAnimatePanel: false,
      reSelectAnimateIndex: undefined,
      hoverPreviewAnimate: ''
    }
  },
  computed: {
    ...mapGetters([
      'projectData',
      'activePageUUID',
      'activeElementUUID',
      'currentPageIndex',
      'activeElementIndex',
      'activeElement'
    ])
  },
  watch: {
    activePageUUID() {
      // 关闭选择动画弹窗
      this.addAnimate(false)
    },
    activeElementUUID() {
      // 关闭选择动画弹窗
      this.addAnimate(false)
    }
  },
  methods: {
    /**
			 * 选取animate
			 * @param item
			 */
    handleChooseAnimate(item) {
      this.showAnimatePanel = false
      if (this.reSelectAnimateIndex === undefined) {
        this.$store.dispatch('h5editor/addElementAnimate', item.value)
      } else {
        this.activeElement.animations[this.reSelectAnimateIndex].type = item.value
        this.$store.dispatch('h5editor/addHistoryCache')
      }
    },
    /**
			 * 删除动画
			 * @param index
			 */
    handleDeleteAnimate(index) {
      this.$store.dispatch('h5editor/deleteElementAnimate', index)
    },
    addAnimate(showAnimatePanel = true) {
      this.showAnimatePanel = showAnimatePanel
      this.reSelectAnimateIndex = undefined
    },
    handleShowChooseAnimatePanel(index) {
      this.showAnimatePanel = true
      this.reSelectAnimateIndex = index
    },
    /**
			 * 执行此条动画效果
			 */
    runAnimate(index) {
      const animationData = index === undefined ? this.activeElement.animations : [this.activeElement.animations[index]]
      Bus.$emit('RUN_ANIMATIONS', this.activeElement.uuid, animationData)
    }
  }
}
</script>

<style lang="scss" scoped>
  .components-attr-edit {
    height: 100%;
    &.components-attr-animate-edit {
      position: relative;
        .el-animate-list-wrapper {
          .el-animate-title-name {
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            font-weight: bold;
            width: 55px;
          }
          .el-animate-title-type-wrapper {
            display: inline-block;
            width: 164px;
          }
          .el-animate-title-type {
            display: inline-block;
            vertical-align: middle;
            max-width: 140px;
            height: 24px;
            line-height: 1px;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: #fafafa;
            border-radius: 60px;
            padding: 0 16px;
            border: none;
            cursor: pointer;
            margin: 0 20px 0 10px;
            &:hover {
              color: white;
              background: #2196F3;
            }
          }
          .el-animate-title-btn {
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            line-height: 24px;
            font-size: 14px;
            color: #666;
            width: 24px;
            height: 24px;
            cursor: pointer;
            border-radius: 4px;
            background: rgba(37, 165, 137, 0.08);
            margin-left: 6px;
            &:hover {
              color: white;
              background: #2196F3;
            }
          }
          .attr-item-edit-wrapper {
            padding-left: 4px;
            display: flex;
            width: 100%;
            text-align: center;
            padding-bottom: 10px;
            .attr-item-title {
              text-align: left;
              min-width: 60px;
              font-size: 12px;
              line-height: 28px;
            }
          }
        }

      .animate-choose-list-wrapper {
        .animate-choose-item-inner {
          display: inline-block;
          width: 25%;
          height: 72px;
          color: rgb(118, 131, 143);
          text-align: center;
          cursor: pointer;
          .animate-choose-image {
            display: inline-block;
            width: 40px;
            height: 40px;
            margin-bottom: 6px;
            background-image: url(./attr-props-components/images/use-beb469.png)
          }
          p {
            font-size: 12px;
            line-height: 1;
          }
        }
      }
    }
  }
</style>
